<!--
 * @Author: ૮₍ ˙О˙₎ა
 * @Date: 2023-08-30 19:55:13
-->
<template>
  <div>
    <div class="header">
      <span style="color: aqua; font-style: italic; font-weight: bold">
        分类销售排行
      </span>
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
        <el-radio-button :label="false">expand</el-radio-button>
        <el-radio-button :label="true">collapse</el-radio-button>
      </el-radio-group>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const isCollapse = ref(true)
</script>

<script lang="ts">
export default {
  name: 'BottomRight',
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-menu-demo {
  flex: 1;
  height: 40px;
  background-color: transparent;
  border-bottom: none;
}
.el-menu--horizontal > .el-menu-item {
  color: #fff;
}
.el-menu-item:not(.is-disabled):hover {
  color: #fff;
  background-color: transparent;
}
.el-menu--horizontal > .el-menu-item.is-active {
  background-color: #00000041;
  color: aqua !important;
  border-bottom-color: #00ffff;
}
:deep(.el-radio-button__inner) {
  background-color: transparent;
  border: 1px solid #aaaaaaa1;
  color: #fff;
}
:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background-color: transparent;
  border-color: #aaa;
  color: aqua;
}
</style>
